<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            // 让所有复选框都选中
            // document.getElementsByName(); 是根据 指定name属性查询返回多个标签对象[集合]
            // 这个集合的操作跟数组一样
            // 集合中每个元素都是 dom 对象
            // 这个集合中的元素顺序是他们在 html 页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            // checked表示复选框的选中状态，如果选中是true， 不选中是false
            // checked 这个属性可读，可写
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = true;
            }

        }

        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            // checked表示复选框的选中状态，如果选中是true， 不选中是false
            // checked 这个属性可读，可写
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = false;
            }
        }

        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");

            // checked表示复选框的选中状态，如果选中是true， 不选中是false
            // checked 这个属性可读，可写
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = !hobbies[i].checked;
                // if(hobbies[i].checked){
                //     //如果为真，就弄成假
                //     hobbies[i].checked = false
                // }else {
                //     //否则就弄成真
                //     hobbies[i].checked = true;
                // }
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="c++" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>

</body>
</html>